<template>
  <div class="user">
     <SearchHead btnTitle="不显示" searchTitle="请输入文章标题"  @onSearch="searchHandler"></SearchHead>
     <List :isShowRead="true" :list="list" :listProp="listProp" @btnClick="emitOrDeleteHandler" @goArt="goArtDetailHandler"></List>
     <Pagination @pageChange="updateUserList" :total="total"></Pagination>
  </div>
</template>

<script>
import SearchHead from '../../../components/admin/SearchHead.vue'
import List from '../../../components/admin/List.vue'
import Pagination from '../../../components/admin/Pagination.vue'
// import { Loading } from 'element-ui'


  export default {
    components:{
      SearchHead,
      List,
      Pagination,
    },
    data() {
      return {
        total:0,
        addOrEdit:'add',
        isShowDrawer:false,
        UserForm:{
          nickname:'',
          username:'',
          password:'',
          role:'普通用户'
        },
         listProp:[
          { label:'标题',prop:'title' },
          { label:'标签',prop:'tag'},
          { label:'日期',prop:'createDate'},
          { label:'阅读',prop:'readCount'},
          { label:'收藏',prop:'foundCount'},
          { label:'评论',prop:'commentCount'},
        ],
        list:[]
      }
    },
    methods: {
     // 模糊查询操作
     async searchHandler(val){
     if(val){
         const { status,data } = await this.$http.get('/userQueryAndTitle?title=' + val)
           if(status!=200) return this.$message.error(data.msg)
          this.list=data.articleList
     }else{
      this.getData()
     }
      }, 

      async goArtDetailHandler({_id}){
          // 跳转页面并且 重新打开一个窗口
        window.open('#/artDetail/' + _id)
      },
      // 删除或者修改操作
      emitOrDeleteHandler(type,row){
        if(type=='delete'){
          // 执行删除用户
           this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          type: 'warning'
        }).then(async () => {
          const { status,data } = await this.$http.delete('/deleteUserFond?arrId=' + row._id)
           if(status!=200) return this.$message.error(data.msg)
           this.$message.success(data.msg)
           this.getData()
        }).catch(() => {
        });
        }else{
          this.addOrEdit='edit'
          // 执行编辑用户
          this.isShowDrawer=true
          // 动态绑定 地址一样,不能直接赋值  要进行深拷贝
          this.UserForm=JSON.parse(JSON.stringify(row))
        }
      },
    // 获取页面数据的封装
    async getData(page=1){
      const { status,data} = await this.$http.get('/getFondListOfDetail?page='+page)
      if(status!=200) return this.$message.error(data.msg)
      this.list = data.fondList
      this.total=data.total
    },
    updateUserList(page){
    this.getData(page)
    }

    },
    // 利用生命周期钩子,  最后获取数据渲染到页面上
    created() {
      this.getData()
    },
  }
  // console.log(data.userList);
</script>

<style lang="less" scoped>
.el-drawer__body>* {
  padding: 0 40px !important;
  p{
    margin: 10px 0;
  }
}
</style>